<template>
    <div>
      <div id="wapper">
        <!---->
        <my-header :headerParam="headerParam" class="bgctran"></my-header>
        <!---->
        <div id="index">
          <div class="banner">
          <mt-swipe :show-indicators="false" :auto="5000">
            <mt-swipe-item v-for="(item,index) in SwipeArr" :key="index" class="imgitem">
             <img :src="'http://oss.miaoyouche.cn/view'+item.bannerPath"  alt=""> 
          <!--    <img src="../../assets/images/myc/index_bg1.png"  alt=""> -->
             
            </mt-swipe-item>
        
           </mt-swipe>
          
            <div id="iconfont">
          <img class="notice1" src="../../assets/images/myc/notice_n1.png" /> 
          <a class="iconfont icon-tongzhi"></a>
          <div class="content_des">
             <mt-swipe :auto="10000" :show-indicators="false">
                   <mt-swipe-item v-for="(item,index) in NotiveArr" :key="index">
                     <span  @click="goNotice(item.id)">{{item.title}}</span>
                   </mt-swipe-item>
                    
              </mt-swipe>
          </div>
             
                     <!-- <img class="notice1" src="../../assets/images/myc/notice_n1.png" />
                     <a class="iconfont icon-tongzhi"></a>
                     <a class="content_des">妙优车加盟政策变更</a>  -->
            </div>

          </div>
         
    
          <!--中间部分-->
          <div class="index-center clearfix">
            <div class="intent_title">{{intent_title}}</div>
            <div class="item" @click="goyxjmslist('2')">
              <i class="icon icon2"></i>
              <p class="text">形象店</p>
              <span class="ll"></span>
            </div>
            <div class="item"   @click="goyxjmslist('1')">
              <i class="icon icon3"></i>
              <p class="text">体验店</p>
            </div>
            <div class="item" @click="goeditJmsInfo()">
              <i class="icon icon1"></i>
              <p class="text">新增</p>
              <span class="ll"></span>
            </div>
          </div>
          <div class="index-center clearfix">
            <div class="intent_title">{{offical_title}}</div>
            <div class="item" @click="gojmslist('2')">
              <i class="icon icon4"></i>
              <p class="text">形象店</p>
              <span class="ll"></span>
            </div>
            <div class="item"  @click="gojmslist('1')">
              <i class="icon icon5"></i>
              <p class="text">体验店</p>
            </div>
             

             <br><br> <br> <br> 
          </div>

        </div>
           
        <div>
         
          <!-- 2018/7/30修改样式 -->
          <!-- <div id="listBox">
            <div class="intent_title">{{intent_title}}</div>
              <ul class="intent levelBox">
                  <li @click="goyxjmslist('2')">形象店</li>
                  <li @click="goyxjmslist('1')">体验店</li>
                  <li @click="goeditJmsInfo()">新增代理商</li>
              </ul>
              <div class="offical_title">{{offical_title}}</div>
              <ul class="offical levelBox">
                  <li  @click="gojmslist('2')">形象店</li>
                  <li  @click="gojmslist('1')">体验店</li>
              </ul>
          </div> -->
           

        </div>
        <!---->
        <!--页面底部-->
        <my-footer :id="footerIndex"></my-footer>
      </div>
    </div>
</template>
<script>
import MyFooter from "@/components/footer";
import MyHeader from "@/components/header";
import {fetchGetData,fetchPostData,host } from "@/api";
import Vue from "vue";

import { Swipe,SwipeItem,Toast} from "mint-ui";
export default {
  data() {
    return {
      footerIndex: 1,
      imgPre: "http://oss.miaoyouche.cn/view",
      headerParam: {
        title: "首页",
        setting: 0,
        back: 0
      },
      SwipeArr: [
        {
          id: 1,
          bannerPath: require("../../assets/images/myc/index_bg1.png"),
          des: "111"
        }
      ],

      intent_title: "意向代理商",
      offical_title: "合作代理商",
      myJms: {},
      wills: {
        很感兴趣: 0,
        感兴趣: 0,
        需再沟通: 0,
        不感兴趣: 0
      },
      NotiveArr:[{title:"妙优车公告..."},{title:"妙优车公告..."}],
      yxfield: [],
      field: [],
      yxjmsArr: [],
      jmsArr: [],
      status: {
        //                "待装修": 0,
        //                "装修中": 0,
        //                "待验收": 0,
        //                "已验收": 0,
        待开业: 0,
        已开业: 0
        //                "需再沟通": 0
      }
    };
  },
  components: { MyFooter, MyHeader, Swipe, SwipeItem },
  methods: {
    //顶部统计形象店体验店总数统计
    getMyJms() {
      fetchGetData(host + "/agent/proxy/getStoreCount")
      //.then(res => res.text())
        .then(res => {
        // var res = JSON.parse(res);
          if (res.status == 1) {
            this.myJms = res.data;

          }
        });
    },
    goNotice(){
      if(arguments){
          this.$router.push({path:"/noticeList",params:{id:arguments[0]}});
      }
    },
    goyxjmslist() {
      if (arguments.length) {
        this.addSession("listStatus", arguments[0]);
        this.$router.push({ path: "/yxjmslist" });
      }
    },
    gojmslist() {
      if (arguments.length) {
        this.addSession("listStatus", arguments[0]);
        this.$router.push({ path: "/jmslist" });
      }
    },
    goeditJmsInfo() {
      this.$router.push({ path: "/editJmsInfo" });
    },
    getBanner() {

      let source = 1; //1,销售端 2,商家端
      let _that = this;

      fetchGetData(host+"/agent/ntc/appBanner?source=1" )
     
        .then((res) => {
     
         if (res.status == 1) {
            _that.SwipeArr = res.data;
            
          }
        });
    },
     getNotices() {
      let source = 1; //1,销售端 2,商家端
      let _that = this;
 
      fetchGetData(host+"/agent/ntc/getNtcText?source=1") 
        //.then(res => res.text())
        .then(res => {
         // var res = JSON.parse(res);
       
          if (res.status == 1) {
            _that.NotiveArr = res.data.text.data.rows;
          
          }
        });
    }
  },
  mounted: function() {

 
    this.getMyJms();
      this.getBanner();
     this.getNotices();
  },
  computed: {
    willList() {
      let list = [];
      for (let key in this.wills) {
        list.push({
          name: key,
          value: this.wills[key]
        });
      }
      return list;
    },
    statusList() {
      let list = [];
      for (let key in this.status) {
        list.push({
          name: key,
          value: this.status[key]
        });
      }
      return list;
    }
  }
};
</script>
<style lang="less" scoped>
#future-cus {
  width: 100%;
  height: 3rem;
}
#now-cus {
  width: 100%;
  height: 3rem;
  margin-top: 0.5rem;
}
#listBox {
  padding: 0 20px;
  & > div {
    line-height: 0.7rem;
    font-size: 5vw;
    font-weight: bold;
    color: #333333;
  }
  ul {
    height: 3rem;
  }
}
.yxstores {
  display: inline-block;
  width: 45%;
  text-align: center;
  padding-top: 10px;
  & div:nth-child(1) {
    font-size: 0.3rem;
    font-weight: 500;
    line-height: 0.6rem;
  }
  & div:nth-child(2) {
    font-size: 0.28rem;
    font-weight: 400;
    line-height: 0.6rem;
  }
}
.t1 {
  font-size: 0.35rem;
  .bigNum {
    display: inline-block;
    font-size: 0.48rem;
  }
}

.levelBox {
  font-size: 0.32rem;
  li {
    text-align: center;
    border: 1px solid #000;
    display: inline-block;
    width: 49%;
    line-height: 1.2rem;
  }
}
.banner {
  height: 4.61rem;
  position: relative;
}
#header {
  color: #fff;
}

.index-center{
  margin-top:.1rem;
  background-color: #fff;
  padding-top:.2em;
}
#index .index-center .intent_title{
  border-left:5px solid #FFCA4C;
  width: 93%;
  margin: 0 auto;
  font-size: 0.28rem;
  line-height: 0.4rem;
   color: #333333;
   padding-left:.25rem;
   
}
.mint-swipe-item img {
  width: 100%;
  height: 100%;
}
#wapper {
  background-color: #f2f2f2;
}
#iconfont {
  font-size: 0;
  box-sizing: border-box;
  background-color: #fff;
  width: 100%;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  position: absolute;
  bottom:0;
  height:0.88rem;
 
  img {
      margin-bottom: 0px;
      margin-left: 0.4rem;
      width: 0.58rem;
      height: 0.28rem;
      display: inline-block;
      vertical-align: middle;
  }
}
.iconfont {
    margin-left: .2rem;
    line-height: 0.88rem;
    vertical-align: middle;
    display: inline-block;
    color: #1e1e1e;
    
}
.content_des {

     padding-left: .2rem;
     vertical-align: middle;
     display: inline-block;
     width:65%;
     height:.88rem;
     color: #1e1e1e;
     font-size: 0.26rem;
     line-height:0.88rem;
     

   
}
.mint-swipe-item span{
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: .88rem;

}
</style>